<template>
	<view class="body">
		<!-- 第1个活动 -->
		<view class="active_list">
			<!-- 活动列表 -->
			<view class="row">
				<!-- 活动图 -->
				<view class="diagram">
					<image class="active_diagram" :src="img"></image>
				</view>
				<!-- 报名好处 -->
				<view class="apply_bg">
					<view class="apply">报名可享</view>
					<view class="description">{{text}}</view>
					<!-- 1 -->
					<view class="timing_l" v-if="day==0">
						<text>剩</text>
						<text class="remaining">{{days}}</text>
						<text>天</text>
					</view>
					<!-- 2 -->
					<view class="timing_l" v-else-if="day==1">
						<text>剩</text>
						<text class="remaining">{{hours}}</text>
						<text>时</text>
						<text class="remaining">{{minutes}}</text>
						<text>分</text>
					</view>
					<!-- 3 -->
					<view class="timing_l" v-else-if="day==2">
						<text>剩</text>
						<text class="remaining">{{minutes}}</text>
						<text>分</text>
						<text class="remaining">{{seconds}}</text>
						<text>秒</text>
					</view>
					<!-- 4 -->
					<view class="timing_l" v-else="day==3">
						<text>活动已结束</text>
					</view>
				</view>
				<!-- 报名人数 -->
				<view class="give_money">
					<!-- 活动标题 -->
					<view class="header">{{title}}</view>
					<!-- <view class="header">我是活动名字来来来分是奥恩啊瓦fewl的二十一</view> -->
					<view class="partake" v-if="par">
						<view class="sign_up">
							<view class="number">已报名{{people}}人</view>	
							<view class="intention_p">
								<view class="intention">意向金</view>
								<text class="price">￥{{money}}</text>
							</view>
						</view>
						<view class="progress">
							<view class="next_stage">距离下一个阶梯奖励还差6人</view>
							<view class="progress_bar">
								<text class="text">总目标完成50%</text>
								<progress percent="50"  backgroundColor="#FFC8C8" activeColor="#FF4040" stroke-width="12"></progress>
							</view>
						</view>
					</view>
					<view class="partake_l" v-if="!par">
						<view class="number_l">已报名{{people}}人</view>	
						<view class="intention_p">
							<view class="intention">意向金</view>
							<text class="price_l">￥{{money}}</text>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 保证 -->
			<view class="benefit">
				<view class="promise">
					<image class="checkbox_l" :src="checkbox"></image>
					<view>{{ensure}}</view>
				</view>
				<view class="promise">
					<image class="checkbox_l" :src="checkbox"></image>
					<view>{{package}}</view>
				</view>
				<view class="promise">
					<image class="checkbox_l" :src="checkbox"></image>
					<view>{{priority}}</view>
				</view>
				<view class="promise">
					<image class="checkbox_l" :src="checkbox"></image>
					<view>{{dissatisfied}}</view>
				</view>
			</view>
			
			<!-- 众筹情况柱状图 -->
			<view class="crowdfunding">
				<!-- 众筹情况的4个字 -->
				<view class="situation">
					<image class="wire" src="../../static/wire.png"></image>
					<text class="situation_h">众筹情况</text>
					<image class="wire" src="../../static/wire.png"></image>
				</view>
				<view class="reach">
					<view class="reach_l">
						共已筹<text class="play_l">{{play}}</text>人，到达<text class="fulfil_f">{{fulfil}}</text>
					</view>
				</view>
				<!-- 柱状图 -->
				<view class="histogram">
					<view class="qiun-columns">
						<view class="qiun-charts" >
							<!--#ifndef MP-ALIPAY -->
							<canvas canvas-id="canvasColumnMeter" id="canvasColumnMeter" class="charts"></canvas>
							<!--#endif-->
						</view>
					</view>
				</view>
				<!-- 柱状图的奖项 -->
				<view class="h_prize">
					<view class="p_prize">
						<view class="prize" v-for="(coin,reward,index) in lists">
							<text class="one">{{reward}}</text>:<text class="yuan">{{coin}}</text>
						</view>		
					</view>
				</view>
			</view>
			<!-- 活动详情 -->
			<view class="event_details">
				<view class="detail">
					<image class="wire" src="../../static/wire.png"></image>
					<text class="detail_font">活动详情</text>
					<image class="wire" src="../../static/wire.png"></image>
				</view>
				<!-- 内容 -->
 				<view class="activities">
					{{content}}
				</view>
				<!-- 页脚 商家说明 -->
				<view class="merchant">
					<text class="valid">以上为本活动邀约邀请，活动细则以商家发布为准</text>
				</view>
			</view>
			<!-- 经销商信息 -->
			<view class="dealer">
				<view class="dealer_title">
					<image class="wire" src="../../static/wire.png"></image>
					<text class="dealer_font">经销商信息</text>
					<image class="wire" src="../../static/wire.png"></image>
				</view>
				<view class="contact">
					<view class="logo_bg">
						<image class="logo" :src="brand"></image>
					</view>
					<view class="info">
						<view class="company_name">
							<view class="company_c">{{company}}</view>
						</view>
						<view class="address">{{add}}</view>
					</view>
				</view>
			</view>
			
			<!-- 活动流程 -->
			<view class="process">
				<view class="title">
					<image class="wire" src="../../static/wire.png"></image>
					<text class="font">活动流程</text>
					<image class="wire" src="../../static/wire.png"></image>
				</view>
				<view class="flow">
					<image class="flow_chart" src="../../static/huodongliebiao/Process.png"></image>
				</view>
			</view>
			<!-- 轮播报名成功的买家 -->
			<view class="carousel">
				<view class="many">......</view>
				<view class="hi">
					<view :class="{hi_top:animate}">
						<view class="cheyou"  v-for="(item,index) in buyers">
							<text>{{item.name}}</text>
						</view>
					</view>
				</view>
			    <view class="manys">......</view>
			</view>
			<!-- 掌邦技术支持 -->
			<view class="support">
				<image class="zanboon" src="../../static/sellcoupon_and_propagation/zanboon.png"></image>
			</view>
		</view>
		
	</view>
</template>

<script>
	// import store from 'store';
	// import { login, events_list } from '@/api/huodongliebiao/huodongliebiao.js';
	//柱状图
    import uCharts from '@/components/u-charts/u-charts.js';
    import  { isJSON } from '@/common/checker.js';
    var _self;
    var canvaColumn=null;
 
	// var countDownDate1=new Date("2019-09-27 15:16:20").getTime();
	// var countDownDate2=new Date("2019-09-26 18:41:00").getTime();
	export default {
		// 注册组件
		// components: { xflSelect},
		data() {
			return {
			// objectArray:[{
				//id:0,//用来区分那个活动的
				// countDownDate:countDownDate1,
				title:'我是活动名字来来来分是奥恩啊瓦fewl的二十一',
				img:'http://img.redocn.com/sheying/20140731/qinghaihuyuanjing_2820969.jpg',
				award:'报名可享',
				text:'我是活动报名的好处，报名即可获得优惠券500元啥的总共不超30字',
				par:true,
				day:3,
				days:'00',
				hours:'00',
				minutes:'00',
				seconds:'00',
				money:'99.00',
				people:'98',
			// }],
			isActive:true,
			checkbox:'../../static/checkbox.png',
			ensure:'低价保证',
			package:'专属礼包',
			priority:'优先提车',
			dissatisfied:'不满包退',
			play:'30',
			fulfil:'阶梯二',
			// 柱状图
			cWidth:'',
			cHeight:'',
			pixelRatio:1,
			textarea:'',
			lists:{
				'阶梯一':'奖励4000元购物车优惠券。',
				'阶梯二':'奖励3000元购物车优惠券。',
				'阶梯三':'奖励2000元购物车优惠券。',
				'阶梯四':'奖励1000元购物车优惠券。'
			},
			content:'内容好多啊，我不知道怎么显示',
			brand:'../../static/brand.png',
			company:'深圳我好美丽的有限公司',
			add:'广东省深圳市龙岗区坂田街道顺兴工业园E708',
			buyers:[
				{name:'恭喜里车友 预购车型兰博基尼X3 活动报名成功!'},
				{name:'恭喜刘车友 预购车型XXXX 活动报名成功!'},
				{name:'恭喜张车友 预购车型XXXX 活动报名成功!'},
				{name:'恭喜王车友 预购车型兰博基尼X3 活动报名成功!'},
				{name:'恭喜王车友 预购车型兰博基尼X3 活动报名成功!'},
				{name:'恭喜王车友 预购车型兰博基尼X3 活动报名成功!'}
			],
			animate:false,
			model:false,
			venue:'深圳我最美丽比美大赛-深圳站…',
			show:true,
			count:'',
			timer:null,
			}
		},
			onLoad() {
				_self = this;
				setInterval(this.showMarquee,2000);
				//#ifdef MP-ALIPAY
				uni.getSystemInfo({
					success: function (res) {
						if(res.pixelRatio>1){
							//正常这里给2就行，如果pixelRatio=3性能会降低一点
							//_self.pixelRatio =res.pixelRatio;
							_self.pixelRatio =2;
						}
					}
				});
				//#endif
				this.cWidth=uni.upx2px(750);
				this.cHeight=uni.upx2px(420);
				this.getServerData();
			},
		
		onShow() {
			this.timel();
			//数组
			// let arr = [1];
			// for(var k in arr ){
			// 	this.timel(arr,k);
			// }
		},
		methods: {
			// async Login(){
			// 	await login();
			// 	await events_list().then(res => {
			// 		console.log(res,'res');
			// 	});
			// },
			toogle:function(){
				this.isActive=!this.isActive;
				uni.navigateTo({
					url: '../../pages/huodongliebiao/huodongliebiao'
				});
			},
			timel(){
				let that=this;
				//that.objectArray[k]['start']=false;
				// console.log(that.objectArray[k]['start'],'333333333');
				//设置倒计时的日期
				var countDownDate=new Date("2019-09-26 18:34:00").getTime();
				// var countDownDate = that.objectArray[k]['countDownDate'];
				//每1秒钟更新一次计数
				var x = setInterval(function(){
					//获取今天的日期和时间
					var now = new Date().getTime();
					//找到现在和倒计时日期之间的距离
					var distance = countDownDate-now;
					//时间计算的天，小时，分钟和秒
					var days = Math.floor(distance / (1000 * 60 * 60 * 24));
					var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
					var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
					var seconds = Math.floor((distance % (1000 * 60)) / 1000);
					that.days=days;
					that.hours = hours;
					that.minutes=minutes;
					that.seconds=seconds;
					console.log(days + '天' + hours + '时' + minutes + '分' + seconds + '秒');
					if(distance<=0){
						that.day=3;
						that.option='活动结束';
						console.log('活动结束');
						clearTimeout(x);
					}else if(days > 1){
						that.day=0;
						console.log('1天以上');
					}else if(hours >= 1 && days <= 0){
						that.day=1;
						console.log('1小时以上，一天以下');
					}else if(hours <= 0){
						that.day=2;
					}
				},1000);
			},
			apply:function(e){
				let that=this;
				//在起始页面跳转到test.vue页面并传递参数
				console.log(e,'@click="apply()"');
				uni.navigateTo({
					url: '../../pages/huodongxiangqing/huodongxiangqing?id='+e,
				});
			},
			//柱状图
			getServerData(){
				uni.request({
					url: 'https://www.ucharts.cn/data.json',
					data:{
					},
					success: function(res) {
						console.log(res.data.data)
						let ColumnMeter={categories:[],series:[]};
						//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
						ColumnMeter.categories=res.data.data.ColumnMeter.categories;
						//这里的series数据,如果为Meter，series[0]定义为外层数据，series[1]定义为内层数据
						ColumnMeter.series=res.data.data.ColumnMeter.series;
						_self.textarea = JSON.stringify(res.data.data.ColumnMeter);
						_self.showColumnMeter("canvasColumnMeter",ColumnMeter);
					},
					fail: () => {
						_self.tips="网络错误，小程序端请检查合法域名";
					},
				});
			},
			showColumnMeter(canvasId,chartData){
				canvaColumn=new uCharts({
					$this:_self,
					canvasId: canvasId,
					type: 'column',
					padding:[15,15,0,15],
					legend:{
						show:false,
						padding:5,
						lineHeight:11,
						margin:0,
					},
					fontSize:11,
					background:'#FFFFFF',
					pixelRatio:_self.pixelRatio,
					animation: true,
					rotate:false,
					categories: chartData.categories,
					series: chartData.series,
					xAxis: {
						disableGrid:true,
					},
					yAxis: {
						min:0,
						max:100,
						//disabled:true
					},
					dataLabel: true,
					width: _self.cWidth*_self.pixelRatio,
					height: _self.cHeight*_self.pixelRatio,
					extra: {
						column: {
							type:'meter',
							// width: _self.cWidth*_self.pixelRatio*0.45/chartData.categories.length,
							width:39,
							meter:{
								//这个是外层边框的宽度
								border:0,
								//这个是内部填充颜色
								fillColor:'#EDEDED'
							}
						}
					  }
				});
				
			},
			// 经销商电话
			dealer_phone:function(){
				uni.makePhoneCall({
					phoneNumber: '12345678910' //仅为示例
				});
			},
			
			showMarquee:function(){
				this.animate=true;
				setTimeout(()=> {
					this.buyers.push(this.buyers[0]);
					this.buyers.shift();
					this.animate=false;
				},500);
			},	
		}
	}
</script>

<style>
	page{
		background: #F3F2F7;
	}

	.active_list{
		/* margin-bottom: 30upx; */
	}
	.row{
		background: #FFFFFF;
		margin-bottom: 20upx;
	}
	.diagram{
		height: 408upx;
		width: 750upx;
	}
	.active_diagram{
		height: 100%;
		width: 750upx;
	}
	.apply_bg{
		display: flex;
		align-items: center;
		height: 90upx;
		width: 750upx;
		background-image: url('~@/static/huodongliebiao/benefit.png');
		background-size:100% 100%;
		background-repeat:no-repeat;
	}
	.apply{
		width: 56upx;
		font-size: 28upx;
		margin-left:30upx;
		margin-right: 26upx;
		color: #FFFFFF;
		font-weight: bold;
	}
	.description{
	    width: 380upx;
	    font-size: 24upx;
	    color: #FFFFFF;
		/* margin-left:26upx; */
	}
	.timing_l{
		display: flex;
		align-items: center;
		align-content: ;
		margin-left: auto;
		margin-right: 30upx;
		color: #FFFFFF;
		font-size: 24upx;
		/* border: 1upx solid #4CD964; */
	}
	.remaining{
		font-size: 40upx;
	    background-color: #FFFFFF;
		border-radius:4upx;
		color: #FF615D;
		padding: 0upx 6upx;
		margin: 0upx 8upx;
	}
	.give_money{
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.header{
		font-size: 32upx;
		padding:24upx 30upx 0upx 30upx ;
		color: #3F536E;
		background: #FFFFFF;
	}
	.partake{
		display: flex;
		justify-content: space-between;
		padding-bottom: 20upx;
	}
	.sign_up{
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-left: 30upx;
	}
	.price{
		color: #FE0400;
		font-size: 56upx;
	}
	.number{
		margin-top: 20upx;
		font-size: 22upx;
		color:#666666;
	}
	.intention_p{
		display: flex;
	}
	.intention{
		height: 30upx;
		border-radius:4upx;
		border: 1upx solid #D53D34;
		padding: 5upx 10upx;
		align-self: flex-end;
		font-size:20upx;
		color: #D53D34;
		margin-right: 6upx;
		margin-bottom: 14upx;
	}
	.progress{
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-right: 30upx;
		
	}
	.next_stage{
		margin-top: 20upx;
		font-size: 20upx;
		color: #949494;
	}
	.progress_bar{
	}
	.text{
		position:absolute;
		color:#FFFFFF;
        font-size: 16upx;
		padding-left: 60upx;
	}
	.partake_l{
		/* border:1upx solid #DD524D; */
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 10upx;
	}
	.number_l{
		font-size: 22upx;
		color:#666666;
		margin-left: 30upx;
	}
	.price_l{
		color: #FE0400;
		font-size: 56upx;
		margin-right: 30upx;
	}
	.benefit{
		display:flex;
		justify-content: space-between;
		align-items: center;
		text-align: center;
		height: 64upx;
		background-color: #FFFFFF;
		margin-bottom: 20upx;
	}
	.promise{
		display: flex;
		align-items: center;
		justify-content: center;
		margin-left: 30upx;
		margin-right:30upx ;
		font-size: 24upx;
		color: #666666;
	}
	.checkbox_l{
		margin-right: 6upx;
		height: 24upx;
		width: 24upx;
	}
	.crowdfunding{
		/* height: 804upx; */
		background-color:#FFFFFF;
		padding-bottom: 2upx;
		margin-bottom: 20upx;
	}
	.situation{
		display:flex;
		justify-content:center;
		height: 88upx;
		align-items: center;
		text-align: center;
		}
	.wire{
		height: 2upx;
		width: 140upx;
	}
	.situation_h{
		font-size: 34upx;
		color: #333333;
		font-weight: bold;
		margin-right: 28upx;
		margin-left: 28upx;
	}
	.reach{
		background-color: #4CD964;
		padding: 18upx 0upx;
		}
	.reach_l{
		margin-left: 30upx;
		color:#666666 ;
        font-size: 24upx;
		
	}
	.play_l{
		margin-left:4upx;
		margin-right:4upx;
		font-size: 32upx;
		font-weight: bold;
	    color: #D60C09;
	}
	.fulfil_f{
		color: #D60C09;
	}
	/* 柱状图的样式 */
	.histogram{
		height: 420upx;
		/* background-color: #0EA391; */
		margin-bottom: 20upx;
	}
	/* 柱状图 */
		.qiun-charts {
		width: 750upx;
		height: 420upx;
		background-color: #FFFFFF;
	}
	
	.charts {
		width: 750upx;
		height: 420upx;
		background-color: #FFFFFF;
	}
	.h_prize{
		color: #666666;
		font-size: 24upx;
		background-color: #F5F5F5;
		margin: 0upx 30upx 30upx 30upx;
	}
	.p_prize{
		padding-top: 26upx;
		padding-bottom: 26upx;
	}
	.prize{
		line-height: 40upx;
		}
    .one{
		margin-left: 20upx;
	}
	.yuan{
		margin-left: 20upx;
	}
	/* 活动详情 */
    .event_details{
		/* height: 1422upx; */
		background-color: #FFFFFF;
		margin-bottom: 20upx;
		
	}
	.detail{
		display:flex;
		justify-content:center;
		height: 88upx;
		align-items: center;
		text-align: center;
	}
	.detail_font{
		font-size: 34upx;
		color: #333333;
		font-weight: bold;
		margin-right: 28upx;
		margin-left: 28upx;
	}
	.activities{
		margin-left:30upx;
		margin-right: 30upx;
		margin-bottom: 20upx;
	}
    .merchant{
		margin-left: 30upx;
		margin-right: 30upx;
		text-align: center;
		border-top:1upx solid #D8D8D8;
		padding-top: 16upx;
		padding-bottom: 16upx;
		font-size: 24upx;
		color: #666666;
	}
	/* 经销商信息 */
	.dealer{
		background-color: #FFFFFF;
		margin-bottom: 20upx;
	}
	.dealer_title{
		display:flex;
		justify-content:center;
		height: 88upx;
		align-items: center;
		text-align: center;
	}
	.dealer_font{
		font-size: 34upx;
		color: #333333;
		font-weight: bold;
		margin-right: 28upx;
		margin-left: 28upx;
	}
	.contact{
		height: 128upx;
		display: flex;
	}
	.logo_bg{
		margin-left: 30upx;
		margin-right: 28upx;
		height: 98upx;
		width: 98upx;
		background-color: #F6F6F6;
		border-radius: 4upx;
	}
	.logo{
		margin: 8upx;
		height: 82upx;
		width: 82upx;
	}
	.info{
		display: flex;
		margin-top: 8upx;
		height: 82upx;
		flex-direction: column;
		text-align: left;
	}
	.company_name{
		display: flex;
		align-items: center;
		width: 560upx;
		
	}
	.company_c{
		font-size: 28upx;
		color: #333333;
	}
	
	.address{
		font-size: 24upx;
		color: #666666;
		margin-top: 8upx;
	}
	.title{
		display:flex;
		justify-content:center;
		height: 88upx;
		align-items: center;
		text-align: center;
	}
	.font{
		font-size: 34upx;
		color: #333333;
		font-weight: bold;
		margin-right: 28upx;
		margin-left: 28upx;
	}
	.adviser_info{
		display: flex;
		align-items: center;
		font-size: 28upx;
		color: #333333;
		height: 142upx;
	}
	
	/* 活动流程 */
	.process{
		background-color: #FFFFFF;
		margin-bottom: 20upx;
	}
	.flow{
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.flow_chart{
		margin-top: 26upx;
		margin-bottom: 30upx;
		height: 746upx;
		width: 690upx;
	}
	/* 轮播 */
	.carousel{
		margin-bottom: 20upx;
	}
	.many{
		margin-left: 30upx;
		position: relative;
		color: #AAAAAA;
		font-size: 24upx;
		top:-10upx;
	}
	.manys{
		margin-left: 30upx;
		position: relative;
		color: #AAAAAA;
		font-size: 24upx;
		
	}
	.hi{
		display: block;
		position: relative;
		height: 120upx;
		overflow: hidden;
	}
		.hi_top{
			transition: all 0.5s;
			margin-top: -30upx;
		}
	.cheyou{
		margin: 0upx 30upx 0upx 30upx;
		line-height:40upx;
		color: #AAAAAA;
		font-size: 24upx;
	}
	
	.support{
		display: flex;
		justify-content: center;
		margin-bottom: 30upx;
	}
		.zanboon{
			height: 28upx;
			width: 216upx;
		}
		
		
		
		
		
		
		
	
</style>
